<template>
    <div>
        <el-input style="width: 200px;" placeholder="请需要查询的标题"
                  suffix-icon="el-icon-search" v-model="keywords"
                  @keyup.enter.native ="getDomainGraph()"></el-input>
        <el-button  @click="getDomainGraph()"type="warning" plain style="margin-left: 10px">查询</el-button>
        <el-button  @click="reset"type="warning" plain style="margin-left: 10px">重置</el-button>

        <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">
                <el-table :data="viewerData" border stripe  :header-cell-class-name="'Hbg'"  border style="margin-top: 25px;">
                    <el-table-column prop="name" label="name" width="100" align="center"></el-table-column>
                    <el-table-column prop="property" label="property" width="140" align="center"></el-table-column>
                    <el-table-column prop="uuid" label="uuid" width="140" align="center"></el-table-column>
                    <el-table-column prop="sid" label="sid" width="140" align="center"></el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5, 8, 10, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div></el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-table :data="viewerData1" border stripe  :header-cell-class-name="'Hbg'"  border @selection-change="handleSelectionChange" style="margin-top: 25px;">
                        <el-table-column prop="sourceid" label="sourceid" width="140" align="center"></el-table-column>
                        <el-table-column prop="targetid" label="property" width="140" align="center"></el-table-column>
                        <el-table-column prop="uuid" label="uuid" width="140" align="center"></el-table-column>
                    </el-table>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageNum"
                                :page-sizes="[5, 8, 10, 20]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                       >
                        </el-pagination>
                </div>
            </el-col>
        </el-row>
        </div>
</template>

<script>
    export default {
        name: "mo",
        data() {
            return {
                viewerData: [],
                viewerData1: [],
                keywords: '蓝色',
                pageNum: 1,
                pageSize: 5,
                graphNodes: [],
            }
        },
        methods: {
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },
            rest() {
                this.keywords = ''
            },
            // 查询图节点和关系
            getDomainGraph() {
                this.request.get("graph/getDomainGraph", {
                    params: {
                        // nodename: this.keywords,
                        // pageSize: this.valueNum=='自定义'?this.limit||50:this.valueNum
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        nodename: this.keywords,
                    }
                }).then(res => {
                    if (res.code == 200) {
                        // this.drawGraph(res.data.node, res.data.relationship);
                        this.viewerData = res.data.node;
                        this.viewerData1 = res.data.relationship;
                    } else {
                        errortip(res.msg)
                    }
                })
            },
        }
    }
</script>


<style scoped>

</style>